<template>
	<view class="good-list">
		<uni-list>
			<uni-list-item v-for="(item,index) in list" :key="index">
				<template slot="body" >
					<view class="u-cell-group">
						<view class="title">
							用章人：{{item.userName}}
						</view>
						<view>当前次数：{{item.useCount}}</view>
						<view>状态：
							<u-tag text="正常" type="success" v-if="item.error==0" size="mini"/>
							<u-tag text="异常" type="error" v-if="item.error==-1" size="mini"/>
							<u-tag text="警告" type="warning" v-if="item.error==1" size="mini"/>
						</view>
						<view v-if="item.errorMsg">异常信息：<u-tag :text="item.errorMsg" type="error" size="mini"/></view>
						<view>使用模式：
							<u-tag v-if="item.modelName" :text="item.modelName" type="success" size="mini"/>
							<u-tag v-else :text="$lizhao.computeType.getTypeName(item.type)" type="success" size="mini"/>
						</view>
						<view>用章日期：{{item.realTime}}</view>
						<view>用章位置：{{item.location}}</view>
						<view>备注：{{item.remark||''}}</view>
						<view v-if="item.useInfos&&item.useInfos.length>0">
							<view>盖章图片：</view>
							<view class="image-inline">
								<view  v-for="(imag,imagIndex) in item.useInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.useInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.useInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.temporaryInfos&&item.temporaryInfos.length>0" >
							<view>临时图片：</view>
							<view class="image-inline error-item">
								<view v-for="(imag,imagIndex) in item.temporaryInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.temporaryInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.temporaryInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.passwordInfos&&item.passwordInfos.length>0" >
							<view>密码图片：</view>
							<view class="image-inline error-item">
								<view v-for="(imag,imagIndex) in item.passwordInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.passwordInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.passwordInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.auditorInfos&&item.auditorInfos.length>0">
							<view>审计图片：</view>
							<view class="image-inline" >
								<view v-for="(imag,imagIndex) in item.auditorInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.auditorInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.auditorInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.numoutInfos&&item.numoutInfos.length>0">
							<view>超次图片：</view>
							<view  class="image-inline error-item">
								<view v-for="(imag,imagIndex) in item.numoutInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image"  width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.numoutInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.numoutInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.timeoutInfos&&item.timeoutInfos.length>0">
							<view>按压超时：</view>
							<view  class="image-inline error-item">
								<view v-for="(imag,imagIndex) in item.timeoutInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.timeoutInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.timeoutInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.replenishInfos&&item.replenishInfos.length>0">
							<view>追加图片：</view>
							<view class="image-inline error-item">
								<view v-for="(imag,imagIndex) in item.replenishInfos" :key="imagIndex">
									<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
									<view class="item-image-warp" v-else>
										<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(imag,imagIndex,item.replenishInfos)"></u-image>
										<u-image src="../../../static/image/icon/yuantu.png" width="50rpx" height="35rpx" class="Original" @click="previewImage(imag,imagIndex,item.replenishInfos,'original')"></u-image>
									</view>
								</view>
							</view>
						</view>
						<view class="btn">
							<u-button type="warning" size="mini" class="u-button" @click="tovoid(item)" v-if="item.error!=3">备注</u-button>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 图片浏览 -->
		<!-- <lizhao-previewImage></lizhao-previewImage> -->
		<!-- <lizhao-image-picture :swiperImages="Image.list" :isShow="Image.isShow" @close="Image.isShow=false" :showIndex="Image.showIndex" src="fileUrl" maxUrlId="fileId"></lizhao-image-picture> -->
		<u-modal v-model="modal.show" title="备注" show-cancel-button async-close @confirm="modalConfirm" ref="uModal">
			<view class="slot-content">
				<u-input v-model="modal.value" type="textarea" border placeholder="请填写备注信息"/>
			</view>
		</u-modal>
		<!-- #ifdef APP-PLUS -->
		<qssAnimateGif ref="qssAnimateGif" style="z-index: 1000;"></qssAnimateGif>
		<!-- #endif -->
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computeImage(){
				return (imag)=>{
					if( imag.QSS==false){
						return imag.fileUrl
					}else{
						return imag.fileUrl+'?Authorization='+this.userInfo.token+'&us=app&width=80'
					}
				}
			}
		},
		props: {
			list: {
				type: [Array],
				default () {
					return []
				}
			},
			//把列表里的所有图片放入到数组中方便下一张
			seeImageList:{
				type: [Array],
				default(){
					return[]
				}
			},
		},
		data() {
			return {
				Image:{
					list:[],
					isShow:false,
					showIndex:0
				},
				modal: {
					show: false,
					value:'',
					infoId:'',
					obj:"",
				},
			}
		},
		mounted() {
			that = this
			
		},
		methods: {
			tovoid(data){
				this.modal.show=true
				this.modal.value=data.remark||''
				this.modal.infoId=data.id
				this.modal.obj=data
			},
			//点击弹框确认
			modalConfirm(){
				let req = {
					infoId: that.modal.infoId, //记录id
					remark: that.modal.value//作废原因
				};
				this.$u.post(that.api.GLOBAL_device_sealRecordInfo_customRemark, req).then(res => {
					that.$refs.uModal.clearLoading();
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon:"none"
						});
						that.modal.obj.remark=req.remark
						that.modal.show=false
					}
				});
			},
			//浏览图片
			async previewImage(row,index,list,type){
				uni.$lizhao.seeBigImage.previewImage(list,row,index,type,this)
			},
		}

	}
</script>

<style lang="scss">
	.good-list {
		background-color: #fff;
		width: 100%;
		.u-cell-group {
			font-size: 28rpx;color: #888;line-height: 48rpx;
			box-sizing: border-box;width: 100%;
			display: flex;flex-direction: column;
			.image-inline{
				display: flex;flex-wrap: wrap;position: relative;
				.item-image-warp{
					position: relative;margin-right: 10rpx;margin-bottom:10rpx;
					.item-image{}
					.Original{position: absolute;right: 8rpx;bottom: 0;}
				}
				
			}
			.title{
				font-weight: bold;color: #000;
			}
			.error-item{
				color:red;
			}
			.btn{
				width: 100%;
				.u-button{
					float: right;
				}
			}
		}
		.slot-content{
			padding:20rpx 30rpx;
		}
	}
</style>
